import React, { useState } from "react";
import { withRouter } from "react-router-dom";
import { doPost } from "../../utils/upload";
import { pageIndex, pages } from "../../common/routerConfig";
import styles from "./index.module.scss";
import URL from "../../common/urls";
import { loginAuth } from "../../common/auth";

const ERR_HINT = "请输入10~30";
const LEVELS = ["小学", "初中", "高中"];

// 主界面
const Index = (props) => {
  const { history } = props;

  const [list, setList] = useState(LEVELS);
  const [level, setLevel] = useState("");
  const [num, setNum] = useState(10);
  const [hint, setHint] = useState("");

  // 用户是否做出过选择
  const [choosed, setChoosed] = useState(false);

  // 提交题目信息
  const onSubmit = () => {
    if (!num || isNaN(num) || num < 10 || num > 30) {
      setHint((p) => ERR_HINT);
    } else {
      setHint((p) => "");
      const payload = {
        level: level,
        number: num,
      };
      doPost(URL.doSelectLevel, payload)
        .then(async (resp) => {
          const data = await resp.json();
          if (data) {
            const { m_quesAndanswers } = data;
            history.push({
              pathname: pages[pageIndex.exam].path,
              query: { m_quesAndanswers: m_quesAndanswers },
            });
          } else {
            alert("出错了");
            setChoosed((c) => false);
            setList((l) => LEVELS);
          }
        })
        .catch((err) => {
          alert(err);
        });
    }
  };

  const onChangePwd = () => {
    history.push({
      pathname: pages[pageIndex.setpwd].path,
      query: {
        firstSet: false,
      },
    });
  };

  const onLogout = () => {
    loginAuth.doLogout();
    history.push(pages[pageIndex.login].path);
  };

  const onBack = () => {
    setChoosed((c) => false);
    setList((l) => LEVELS);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>Home</div>
      <div>
        {list.map((elm) => {
          return (
            <div className={styles.action}>
              <div
                className={styles.btn}
                onClick={(e) => {
                  setList((p) => [elm]);
                  setLevel((p) => elm);
                  setChoosed((p) => true);
                }}
              >
                📝 {elm}
              </div>
            </div>
          );
        })}
      </div>
      {choosed ? (
        <div>
          <div className={styles.inputWrapper}>
            <div className={styles.borderWrapper}>
              <input
                type="text"
                className={styles.borderItem}
                placeholder="题目数量"
                onChange={(e) => {
                  const val = e.target.value;
                  setNum((p) => val);
                }}
              />
            </div>
          </div>
          <div className={styles.hint}>{hint}</div>
          <div className={styles.action}>
            <div className={styles.btnDecide} onClick={onBack}>
              👈cancel
            </div>
            <div className={styles.btnDecide} onClick={onSubmit}>
              👌submit
            </div>
          </div>
        </div>
      ) : (
        <div className={styles.action}>
          <div className={styles.btnPWD} onClick={onChangePwd}>
            重置密码
          </div>
          <div className={styles.btnPWD} onClick={onLogout}>
            退出登录
          </div>
        </div>
      )}
    </div>
  );
};

export default withRouter(Index);
